<!-- 金额输入框 -->
<template>
	<view class="w-100">
		<u--input
		    :placeholder="placeholder"
			:placeholderClass="placeholderClass"
			:placeholderStyle="placeholderStyle"
			:inputAlign="inputAlign"
			:fontSize="fontSize"
			:color="color"
			:prefixIcon="prefixIcon"
			:prefixIconStyle="prefixIconStyle"
			:suffixIcon="suffixIcon"
			:suffixIconStyle="suffixIconStyle"
		    :border="border"
			:shape="shape"
			:customStyle="customStyle"
			:disabled="disabled"
		    v-model="title"
			type="number"
			cursorSpacing="100"
			@change="change"
			@blur="handleBlur"
			@focus="onFocus"
		></u--input>
	</view>
</template>

<script>
import { min } from 'moment'
	
	export default {
		name: 'HNumberInput',
		data() {
			return {
				title:'', // 选中的标题名称
				focus: false, // 是否有焦点
			}
		},
		model: {
			prop: 'value',
			event: 'change',
		},
		props: {
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 选中的值
			value: {
				type: [String, Number],
				default: '',
			},
			// 小数点保留的位数 - 默认保留一位小数
			digit: {
				type: [String, Number],
				default: 1,
			},
			// 是否百分比输入框
			max: {
				type: Number,
				default: null,
			},
			min: {
				type: Number,
				default: null,
			},
			// 输入框为空时的占位符
			placeholder: {
				type: [String, Number],
				default: '请输入',
			},
			// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
			placeholderClass: {
				type: [String],
				default: '',
			},
			// 指定placeholder的样式，字符串/对象形式，如"color: red;"
			placeholderStyle: {
				type: [String, Object],
				default: 'color: #C0C4CC'
			},
			// 输入框内容对齐方式 - left | center | right
			inputAlign: {
				type: [String,],
				default: 'left',
			},
			// 输入框字体的大小
			fontSize: {
				type: [String, Number],
				default: '15px',
			},
			// 输入框字体颜色
			color: {
				type: [String],
				default: '#303133',
			},
			// 输入框前置图标
			prefixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			prefixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 输入框前置图标
			suffixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			suffixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 边框类型，surround-四周边框，bottom-底部边框，none-无边框
			border: {
				type: [String],
				default: 'surround',
			},
			// 输入框形状，circle-圆形，square-方形
			shape: {
				type: [String],
				default: 'square',
			},
			customStyle: {
				type: [Object],
				default: () => {},
			},
			defaultNumber: {
				type: [String, Number],
				default: null,
			},
		},
		watch: {
			// 监听value是否有值
			value: {
				handler (val, oldVal) {
					this.title = val
					if (!this.focus && val != '') {
						// 当没有获取到焦点
						this.blur()
					}
				},
				immediate: true
			},
		},
		onLoad() {
		},
		methods: {
			handleBlur(val) {
			  this.blur()
				this.$emit('blur', val)
			},
			change (value) {
				this.$emit('change',value)
				if (this.focus) {
					this.$emit('input', value)
				}
			},
			blur () {
				if (this.title === '' || this.title === null) {
					if (this.defaultNumber === null || this.defaultNumber === undefined || this.defaultNumber === '') {
						return false
					} else {
						this.title = this.defaultNumber
					}
					return false
				}
				var digit = Number(this.digit)
				if (this.min !== null) {
					if (Number(this.title)<= this.min) {
						this.title = this.min
					}
				}
				if (this.max !== null) {
					if (Number(this.title) >= this.max) {
						this.title = this.max
					}
				}
				var val = Number(this.title).toFixed(digit)
				this.title = val
				this.$emit('change',val);
				if (this.focus) {
					this.$emit('input', val)
				}
				this.focus = false
			},
			onFocus () {
				this.focus = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>